<template>
    <view class="album">
        <view class="item" v-for="(item,index) in list" :key="index">
            <view class="avatar">
                <u-image width="84rpx" height="84rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u-image>
            </view>
            <view class="content">
                <view class="name">{{ item.username }}</view>
                <view class="text">{{ item.content }}</view>
                <view class="imgs" v-if="item.imgs.length > 0" style="margin:0 -4px;">
                    <u-row gutter="16">
                        <u-col :span="item.imgs.length == 1 ? 12 : 4" v-for="(img,j) in item.imgs" :key="j">
                            <view>
                                <u-image width="100%" :height="imgHeight" :src="img" @click="showImg(item.imgs, j)"></u-image>
                            </view>                                
                        </u-col>
                    </u-row>
                </view>
                <view class="comment">
                    <view class="time">1分钟</view>
                    <view class="btns">
                        <view class="btn-item"><u-image :src="proxy.$icon.like" width="32rpx" height="32rpx"></u-image><text class="ml-1">999</text></view>
                        <view class="btn-item"><u-image :src="proxy.$icon.talk" width="32rpx" height="32rpx"></u-image><text class="ml-1">999</text></view>
                        <!-- <view class="btn-item"><u-image :src="proxy.$icon.share" width="32rpx" height="32rpx"></u-image><text class="ml-1">999</text></view> -->
                    </view>
                </view>
            </view>
        </view>
    </view>
    <u-popup v-model="imgPopup.isShow" mode="center" width="100%" closeable class="popup-swiper">
        <u-swiper class="transparent-swiper" style="background-color:transparent" :list="imgPopup.list" :current="imgPopup.current" border-radius="0" :height="imgPopup.height" img-mode="widthFix"></u-swiper>
	</u-popup>
</template>
<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  listData: {
    type: Array,
  }
});
const list = computed(() => {
    return props.listData.value;
});
const imgHeight = ref('100px');
const imgPopup = reactive({
    isShow:false,
    list: [],
    current: 0,
    height: 100,
});
const getImgHeight = () => {
    const res = uni.getSystemInfoSync();
    let width = res.windowWidth - 45 - 42 - 16;
    imgHeight.value = (width / 3) + 'px';
};
const showImg = (imgs,i) => {
    let height = 0;
    let r = 1;
    imgs.forEach(item => {
        uni.getImageInfo({
            src: item,
            success: res => {
                if(res.height > height){
                    height = res.height;
                    r = uni.getSystemInfoSync().windowWidth / res.width;
                    imgPopup.height = height * r * 2;
                }
            }
        });
    });
    imgPopup.isShow = true;
    imgPopup.list = imgs.map((item,index) => {
        return {title: index,image: item};
    });
    imgPopup.current = i;
    console.log(imgPopup.list);
}
onShow(() => {
    getImgHeight();
});
</script>